// 请求成绩数据 并 渲染页面

const tbody = document.querySelector('tbody');

async function showScore() {
    const result = await axios({
        url: '/score/list',
        method: 'get',
        // 放在拦截器中，避免重复编写造成代码冗余
        // headers: {
        //     Authorization: localStorage.getItem('tokenwa'),
        // }
    })
    // console.log(result);
    // console.log(result.data.data);
    const studentScore = result.data.data;

    let html = '';

    for (const key in studentScore) {
        // console.log(key);
        let i = 1; // 成绩次数
        console.log(typeof key);
        const { name, score } = studentScore[key];
        html += `
        <tr>
          <th scope="row">${key}</th>
          <td>${name}</td>
        `
        score.forEach(item => {
            html += `<td class="score" data-id=${key} data-batch=${i} >${item}</td>`
            i++;
        });
        html += `</tr>`
    }
    tbody.innerHTML = html;
}

showScore();

tbody.addEventListener('dblclick', e => {
    // console.log(e.target);
    const data = e.target;
    if (data.classList.contains('score')) {
        // console.log('双击成绩触发');
        const input = document.createElement('input');
        input.type = 'text';
        input.value = data.innerText;
        data.appendChild(input);
        input.focus();

        // 失去焦点事件
        input.addEventListener('blur', change);
        
        // 键盘抬起事件
        input.addEventListener('keyup', e => {
            if (e.key === 'Enter') {
                // 防止 键盘抬起时，同时触发失去焦点，此处进行失去焦点事件解绑
                input.removeEventListener('blur', change)
                // input.removeEventListener('事件类型', 对应的具名函数)
                change()

            }
        })

        // 封装 修改 和 提示效果
        async function change() {
            // console.log(data.dataset);
            const { id, batch } = data.dataset;
            const score = input.value;
            const result = await axios({
                url: '/score/entry',
                method: 'post',
                data: {
                    stu_id: id,
                    batch,
                    score
                }
            })
            // console.log(result);
            if (result.data.code === 0) {
                toastr.success(result.data.message, "恭喜");
                showScore();
            }
        }
    }
})

